import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Eye, EyeOff, Hash, Copy, Check } from 'lucide-react';
import { useAppStore } from '@/stores/appStore';

interface OriginalDataDisplayProps {
  title?: string;
  showControls?: boolean;
  compact?: boolean;
  className?: string;
}

export function OriginalDataDisplay({ 
  title = "原始数据", 
  showControls = true, 
  compact = false,
  className = ""
}: OriginalDataDisplayProps) {
  const { zkProofData, experienceMode } = useAppStore();
  const [showData, setShowData] = useState(true);
  const [copied, setCopied] = useState(false);
  
  const preImage = zkProofData?.input?.preImage || '999999';
  const dataHash = zkProofData?.input?.dataHash || '';
  
  const handleCopy = async (text: string) => {
    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (error) {
      console.warn('Copy failed:', error);
    }
  };

  const formatDataForDisplay = (data: string | undefined | null, maxLength: number = 20) => {
    if (!data || typeof data !== 'string') return 'N/A';
    if (data.length <= maxLength) return data;
    return `${data.slice(0, maxLength)}...`;
  };

  if (compact) {
    return (
      <motion.div
        initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        className={`bg-slate-700/50 rounded-lg p-3 border border-slate-600 ${className}`}
      >
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <Hash className="w-4 h-4 text-quantum-blue" />
            <span className="text-sm font-medium text-white">{title}</span>
          </div>
          {showControls && (
            <button
              onClick={() => setShowData(!showData)}
              className="p-1 rounded hover:bg-slate-600 transition-colors"
              title={showData ? "隐藏数据" : "显示数据"}
            >
              {showData ? <EyeOff className="w-4 h-4 text-gray-400" /> : <Eye className="w-4 h-4 text-gray-400" />}
            </button>
          )}
        </div>
        
        <AnimatePresence>
          {showData && (
            <motion.div
              initial={{ height: 0, opacity: 0 }}
              animate={{ height: 'auto', opacity: 1 }}
              exit={{ height: 0, opacity: 0 }}
              transition={{ duration: 0.2 }}
              className="mt-2 space-y-1 overflow-hidden"
            >
              <div className="text-xs text-gray-400">PreImage:</div>
              <div 
                className="font-mono text-sm text-quantum-blue cursor-pointer hover:bg-slate-600/50 rounded p-1 transition-colors"
                onClick={() => handleCopy(preImage)}
                title="点击复制"
              >
                {formatDataForDisplay(preImage, 12)}
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </motion.div>
    );
  }

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      className={`bg-slate-700/30 rounded-lg p-4 border border-slate-600 ${className}`}
    >
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center space-x-2">
          <div className="w-8 h-8 bg-quantum-blue/20 rounded-lg flex items-center justify-center">
            <Hash className="w-4 h-4 text-quantum-blue" />
          </div>
          <h3 className="text-lg font-semibold text-white">{title}</h3>
        </div>
        {showControls && (
          <button
            onClick={() => setShowData(!showData)}
            className="p-2 rounded-lg hover:bg-slate-600 transition-colors"
            title={showData ? "隐藏数据" : "显示数据"}
          >
            {showData ? <EyeOff className="w-5 h-5 text-gray-400" /> : <Eye className="w-5 h-5 text-gray-400" />}
          </button>
        )}
      </div>
      
      <AnimatePresence>
        {showData && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.3 }}
            className="space-y-4 overflow-hidden"
          >
            {/* PreImage */}
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <label className="text-sm font-medium text-gray-300">原始数据 (PreImage)</label>
                <button
                  onClick={() => handleCopy(preImage)}
                  className="flex items-center space-x-1 text-xs text-gray-400 hover:text-white transition-colors"
                  title="复制PreImage"
                >
                  {copied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
                  <span>{copied ? '已复制' : '复制'}</span>
                </button>
              </div>
              <div className="bg-slate-800 rounded-lg p-3 border border-slate-600">
                <div className="font-mono text-sm text-quantum-blue break-all">
                  {preImage}
                </div>
              </div>
            </div>
            
            {/* DataHash - 只在开发者模式或教育模式显示 */}
            {(experienceMode.showTechDetails || experienceMode.showCode) && dataHash && (
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <label className="text-sm font-medium text-gray-300">数据哈希 (DataHash)</label>
                  <button
                    onClick={() => handleCopy(dataHash)}
                    className="flex items-center space-x-1 text-xs text-gray-400 hover:text-white transition-colors"
                    title="复制DataHash"
                  >
                    {copied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
                    <span>{copied ? '已复制' : '复制'}</span>
                  </button>
                </div>
                <div className="bg-slate-800 rounded-lg p-3 border border-slate-600">
                  <div className="font-mono text-xs text-gray-400 break-all">
                    {formatDataForDisplay(dataHash, 40)}
                  </div>
                </div>
              </div>
            )}
            
            {/* 数据范围警告 */}
            {preImage && (
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                className="bg-yellow-500/10 border border-yellow-500/30 rounded-lg p-3"
              >
                <div className="text-xs text-yellow-400">
                  💡 <strong>数据范围</strong>: 支持正整数，建议使用6-12位数字以获得最佳体验
                </div>
              </motion.div>
            )}
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  );
}